<style lang="scss">
  .staff {
    .el-main {
      padding: 0px 12px 12px 12px;
    }
    .el-tabs {
      width: 100%;
      .el-tabs__header {
        margin: 10px 12px;
        .el-tabs__item.is-active {
          // border-bottom: 2px solid #409EFF;
        }
      }
    }
  }
</style>

<template>
  <el-container class="staff">
    <!-- 状态导航 -->
    <el-tabs v-model="activeTabState" type="card" @tab-click="tabClick">
      <el-tab-pane name="111">
        <span slot="label"><i class="el-icon-edit"></i> 待分发</span>
        <staff-get ref="staffGet"></staff-get>
      </el-tab-pane>
      <el-tab-pane name="222">
        <span slot="label"><i class="el-icon-bell"></i> 今日预警</span>
        <staff-warning ref="staffWarning"></staff-warning>
      </el-tab-pane>
      <el-tab-pane name="333">
        <span slot="label"><i class="el-icon-link"></i> 已分发</span>
        <staff-send ref="staffSend"></staff-send>
      </el-tab-pane>
      <el-tab-pane name="444">
        <span slot="label"><i class="el-icon-edit-outline"></i> 已办理</span>
        <staff-already ref="staffAlready"></staff-already>
      </el-tab-pane>
      <el-tab-pane name="555">
        <span slot="label"><i class="el-icon-zoom-out"></i> 已退回</span>
        <staff-back ref="staffBack"></staff-back>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script>
  import staffGet from './staff-get.vue'
  import staffWarning from './staff-warning.vue'
  import staffSend from './staff-send.vue'
  import staffAlready from './staff-already.vue'
  import staffBack from './staff-back.vue'

  export default {
    data () {
      return {
        activeTabState: '111'
      }
    },
    methods: {
      // tab 点击
      tabClick (tab, event) {
        switch (tab.name) {
          case '111':
            this.$refs.staffGet.doSearch()
            break
          case '222':
            this.$refs.staffWarning.initFn()
            break
          case '333':
            this.$refs.staffSend.initFn()
            break
          case '444':
            this.$refs.staffAlready.initFn()
            break
          case '555':
            this.$refs.staffBack.initFn()
            break
        }
      }
    },
    components: {
      staffGet, staffWarning, staffSend, staffAlready, staffBack
    }
  }
</script>
